<template>
  <svg :id="id" />
</template>
<script>
import JsBarcode from 'jsbarcode'

export default {
  name: 'JsBarcodeJHD',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      id: 'jhd'+ this.generateUuid()
    }
  },
  mounted(){
    this.$nextTick(() => {
      this.generateBarcode()
    })
  },
  methods: {
    generateBarcode() {
      JsBarcode(`#${this.id}`, this.text, {
        format: 'CODE128',
        lineColor: '#000', // 设置条和文本的颜色
        background: 'rgba(0,0,0,0)', // 设置条形码的背景
        displayValue: true, //是否在条形码下方显示文字
        fontSize: 18,
        textAlign: 'left', //设置文本的水平对齐方式
        height: 50 // 高度
      })
    },
    // 生成6位长度的字符串
    generateUuid() {
      return (~~(Math.random() * (1 << 30))).toString(36); // "<<"操作相当于乘上2的n次方，"~~"相当于parseInt
    }
  }
}
</script>
